<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:t="http://myfaces.apache.org/tomahawk"
      xmlns:mias="http://www.monsters.inc/mias">
<body>
<ui:composition template="templates/template.xhtml">
  <ui:define name="title">Login</ui:define>
  <ui:define name="content"> 
    <h:form id="login">
      <h:panelGrid columns="4">
        <mias:field id="userName" bean="#{loginBean}" required="true" minLength="6" />
        <mias:field id="password" bean="#{loginBean}" required="false" minLength="3" secret="true" />
        <h:outputLabel />
        <t:captcha captchaSessionKeyName="captcha" />
        <h:outputLabel />
        <h:outputLabel />
        <mias:field id="captcha" bean="#{loginBean}" required="true" >
          <f:validator validatorId="mias.captchaValidator" />
        </mias:field>
        
        <!-- 
             This empty label is added to position the
             OK button aligned with the input fields 
        -->
        <h:outputLabel />
        <h:commandButton value="OK" action="#{loginBean.login}" />
        <h:outputLabel />
        <h:outputLabel />
      </h:panelGrid>
    </h:form>
    
    <!--
         This demonstrates the use of expression language within inline texts.
         The "blockquote" xhtml element is used by the CSS to format the 
         quote of the day. A "div" could have been used as well, but since we
         are displaying a quote here, the use of "blockquote" does make sense. 
    -->
    <blockquote>
      <i>#{mias:getQuoteOfTheDay()}</i>
      <b>#{mias:getAuthorOfTheDay()}</b>
    </blockquote>
  </ui:define>
</ui:composition>

</body>
</html>